<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.zhimg.com/vue@2.7.14/dist/vue.js"></script>
     
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="vipPage">


        <div class="line"></div>
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
            background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1" @click="toAdd()">新增会员</el-menu-item>
                <el-menu-item index="2-2">会员查询</el-menu-item>
                <el-submenu index="2-4">
                    <template slot="title">其他</template>
                    <el-menu-item index="2-4-1" :disabled="true">批量修改</el-menu-item>
                    <el-menu-item index="2-4-2" :disabled="true">批量删除</el-menu-item>
                </el-submenu>
            </el-submenu>
            <el-menu-item index="3" disabled>消息中心</el-menu-item>
        </el-menu>


        <el-table :data="datas" border stripe>
            <el-table-column v-for="col in cols" 
            :prop="col.id" 
            :key="col.id" 
            :label="col.label" 
            :width="200">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="select(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="toUpdate(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="toDelete(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="title" :visible.sync="visualble">
            <el-form :model="form">
                <el-form-item label="id" :label-width="formLabelWidth">
                    <el-input v-model="Data.id" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="Data.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="年龄" :label-width="formLabelWidth">
                    <el-input v-model="Data.age" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="Data.tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="email" :label-width="formLabelWidth">
                    <el-input v-model="Data.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="会员等级" :label-width="formLabelWidth">
                    <el-input v-model="Data.level" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="标签" :label-width="formLabelWidth">
                    <el-input v-model="Data.notes" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="visualble = false">取 消</el-button>
                <el-button type="primary" @click="update()">确 定</el-button>
            </div>
        </el-dialog>




        <el-dialog title="删除" :visible.sync="dialog">
            <el-form :model="form">
                <p>是否删除会员{{delName}}</p>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialog = false">取 消</el-button>
                <el-button type="primary" @click="del()">确 定</el-button>
            </div>
        </el-dialog>




        <el-dialog title="错误" :visible.sync="dialogerror">
            <el-form :model="form">
                <p>id号重复!</p>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogerror = false">取 消</el-button>
                <el-button type="primary" @click="dialogerror = false">确 定</el-button>
            </div>
        </el-dialog>






        <el-dialog :title="vipName" :visible.sync="vipWindow">
            <el-form :model="form">
                <el-form-item label="头像" :label-width="formLabelWidth">
                    <img src="./img/icon.png" style="margin: 0px auto;">
                </el-form-item>
                <el-form-item label="标签" :label-width="formLabelWidth">
                    <el-tag size="small">{{item.notes}}</el-tag>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="item.tel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="e-mail" :label-width="formLabelWidth">
                    <el-input v-model="item.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-descriptions title="用户信息">
                        <el-descriptions-item label="用户名">{{item.name}}</el-descriptions-item>
                        <el-descriptions-item label="手机号">{{item.tel}}</el-descriptions-item>
                        <el-descriptions-item label="居住地">{{item.addr}}</el-descriptions-item>
                        <el-descriptions-item label="备注">
                            <el-tag size="small">{{item.notes}}</el-tag>
                        </el-descriptions-item>
                        <el-descriptions-item label="联系地址">{{item.addr}}</el-descriptions-item>
                    </el-descriptions>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="vipWindow = false">取 消</el-button>
                <el-button type="primary" @click="vipWindow = false">确 定</el-button>
            </div>
            <p>{{Data.name}}</p>
        </el-dialog>




    </div>

</body>
<script>
    new Vue(
        {

            el: '#vipPage',
            data() {
                return {
                    //信息码，判断发送的请求
                    code: 0,
                    formLabelWidth: "200",
                    //删除标记
                    delete: false,
                    //保存删除元素编号
                    delId: "",
                    //保存删除的文件名
                    delName: "",
                    //用于获取新增的用户输入信息
                    item: {
                        id: "",
                        name: "",
                        age: 0,
                        tel: "",
                        addr: "",
                        iconUrl: "",
                        notes: "",
                        email: "",
                        level: ""
                    },
                    dialogerror: false,
                    dialog: false,
                    vipWindow: false,
                    vipName: "",
                    title: "",
                    visualble: false,
                    Data: {
                        id: "",
                        name: "",
                        age: 0,
                        tel: "",
                        addr: "",
                        iconUrl: "",
                        notes: "",
                        email: "",
                        level: ""
                    },
                    resourceData: {
                        id: "",
                        name: "",
                        age: 0,
                        tel: "",
                        addr: "",
                        iconUrl: "",
                        notes: "",
                        email: "",
                        level: ""
                    },
                    datas: [],
                    cols: [
                        {
                            id: "id",
                            label: "id"
                        },
                        {
                            id: "name",
                            label: "姓名"
                        },
                        {
                            id: "age",
                            label: "年龄"
                        },
                        {
                            id: "tel",
                            label: "电话"
                        },
                        {
                            id: "level",
                            label: "会员等级"
                        },
                        {
                            id: "notes",
                            label: "标签"
                        },
                        {
                            id: "addr",
                            label: "联系地址"
                        }



                    ]
                }
            },
            created() {

                this.load();

            },
            methods: {
                load() {
                    let url = 'http://119.91.19.33:8080/api/vip';
                    axios.get(url)
                        .then((res) => {
                            console.log(res.data)
                            this.datas = res.data
                            console.log(data)
                        })
                        .catch((err) => {
                            console.error(err);
                        })
                },
                del() {
                    //this.delId = id;
                    //let url = `http://localhost:8080/api/vip/${this.delId}`;
                    let url = 'http://119.91.19.33:8080/api/vip?id=' + this.delId;
                    axios.delete(url)
                        .then(res => {
                            console.log(res)
                            this.load();
                        })
                        .catch(err => {
                            console.error(err);
                        })
                    this.dialog = false;

                },
                select(data) {
                    this.vipWindow = true
                    this.item = data


                },
                //update方法，code为1时发送增加请求,code为2时发送修改请求
                update() 
                {
                    let url = 'http://119.91.19.33:8080/api/vip';
                    switch (this.code) {
                        case 1:
                            axios.put(url, this.Data)
                                .then(res => {
                                    console.log(res)
                                    this.load();
                                    Data = this.resourceData
                                    this.visualble = false;
                                    this.code = 0;
                                })
                                .catch(err => {
                                    dialogerror = true;
                                    console.error(err);
                                })
                            break;
                        case 2:
                            axios.post(url, this.Data)
                                .then(res => {
                                    console.log(res)
                                    this.load();
                                    Data = this.resourceData
                                    this.visualble = false;
                                    this.code = 0;
                                })
                                .catch(err => {
                                    dialogerror = true;
                                    console.error(err);
                                })

                    }
                    Data = this.resourceData
                    this.visualble = false;
                    this.code = 0;

                },
                //通过id查找元素
                selectFromId(id) {
                    datas.forEach(item => {
                        if (id == item.id) {
                            console.log(id);
                            return item;
                        }
                    });
                },
                //删除准备方法
                toDelete(item) {
                    this.delId = item.id;
                    this.delName = item.name;
                    this.dialog = true
                },
                //增加准备方法
                toAdd() {
                    this.title = "增加"
                    this.code = 1;
                    this.visualble = true
                },
                //更新准备方法
                toUpdate(data) {
                    this.Data = data
                    this.title = "修改"
                    this.code = 2;
                    this.visualble = true
                }
                


            },



        }


    )
</script>

</html>